<template>
  <VPage class="app-container">
    <div class="order" v-if="!showDetail">
      <div class="text-xl font-medium text-center py-2">头程单号</div>
      <div><el-input style="height: 60px;font-size: 20px;" v-model="order_no" placeholder="请输入" @change="changeOrder" />
      </div>
    </div>
    <template v-else>
      <el-row :gutter="12" class="mb-3">
        <el-col :span="16">
          <el-card shadow="never">
            <el-row :gutter="12" class="flex items-end">
              <el-col :span="10">
                <div>SKU</div>
                <div><el-input size="large" v-model="form.sku" placeholder="请输入" @change="handlePack()" /></div>
              </el-col>
              <el-col :span="8">
                <div>数量</div>
                <div><el-input size="large" v-model="form.pack_num" placeholder="请输入" @change="handlePack()" /></div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>

        <el-col :span="8">
          <el-card shadow="never">
            <div class="mb-2">已扫码数量</div>
            <div>
              <div class="text-base text-right"><span class="base-red-color">{{ detail.packNum
              }}</span>/{{ detail.needPackNum }}</div>
              <el-progress :percentage="percentage" :show-text="false" />
            </div>
          </el-card>
        </el-col>
      </el-row>
      <div class="px-4 py-4 bg-white goods">
        <el-row :gutter="12">
          <el-col :span="6">
            <div class="text-[#666666]">头程单号：<span>{{ detail.head_goods_order_no }}</span></div>
          </el-col>
          <el-col :span="6">
            <div class="text-[#666666]">物流商：<span>{{ detail.delivery_cn }}</span></div>
          </el-col>
          <el-col :span="6">
            <div class="text-[#666666]">运输方式：<span>{{ detail.shipping_cn }}</span></div>
          </el-col>
          <el-col :span="6">
            <div class="text-[#666666]">发货备注：<span>{{ detail.remark }}</span></div>
          </el-col>
        </el-row>
        <div class="flex py-4">
          <div class="mr-4" style="width: 286px;height: 240px;">
            <img :src="detail.image">
          </div>
          <div>
            <div class="goods-item">SKU：<span>{{ detail.sku }}</span></div>
            <div class="goods-item">产品名称：<span>{{ detail.sku_cn_title }}</span></div>
            <div class="goods-item">物流属性：<span>{{ detail.goods_attribute }}</span></div>
            <div class="goods-item">包材信息：<span>{{ detail.cn_material }}</span></div>
            <div class="goods-item">尺寸：<span>长{{ detail.length }} * 宽{{ detail.width }} *
                高{{ detail.height }}</span></div>
          </div>
        </div>
      </div>
    </template>
  </VPage>
</template>
<script name="HeadPack" setup>
import { nextTick, ref, reactive, toRefs, computed } from 'vue'
import { receivePack, packHeadOrder } from './api/index'
import { ElMessage, ElMessageBox } from 'element-plus'

const percentage = computed(() => {
  if (detail.value.needPackNum && detail.value.packNum) {
    return detail.value.needPackNum / detail.value.packNum
  } else {
    return 0
  }
})

const data = reactive({
  order_no: '',
  showDetail: false,
  form: {},
  detail: {},
  order_id: ''
})


const { order_no, showDetail, form, detail, order_id } = toRefs(data)

const changeOrder = async (val) => {
  try {
    const res = await receivePack({
      order_no: order_no.value
    })
    order_id.value = res.data.id
    ElMessage.success('领取成功')
    showDetail.value = true
  } catch (e) {
    throw Error(e)
  }
}

const handlePack = async (val) => {
  try {
    const res = await packHeadOrder({
      id: order_id.value,
      sku: form.value.sku,
      pack_num: form.value.pack_num || 1
    })
    detail.value = res.data
  } catch (e) {
    throw Error(e)
  }
}
</script>
<style lang="scss" scoped>
:deep(.v-page__body) {
  background: transparent;
}

.order {
  width: 900px;
  background: #F6FAFF;
  border-radius: 16px;
  padding: 30px 100px;
  position: absolute;
  top: 150px;
  left: 50%;
  transform: translateX(-50%);
}

.goods {
  height: calc(100% - 140px);
}

.goods-item {
  margin-bottom: 16px;
  color: #666666;
}
</style>